<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'accent': '#EC4899',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // gray-100 for card backgrounds
                        'text-muted-light': '#6B7280', // gray-500
                        'border-light': '#E5E7EB', // gray-200 for borders
                        'chart-grid-light': '#D1D5DB', // gray-300 for chart grid lines
                        'chart-text-light': '#4B5563'  // gray-600 for chart labels
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; /* base-100-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .bottom-nav {
            border-top: 1px solid #E5E7EB; /* border-light */
        }
        .nav-item.active i, .nav-item.active span {
            color: #10B981; /* primary color */
        }
        .stat-card {
            background-color: #F3F4F6; /* neutral-light */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-base-content-light">数据统计</h1>
            <button class="text-text-muted-light hover:text-primary" onclick="document.location.href='settings.html'">
                <i class="fas fa-cog"></i>
            </button>
        </div>
    </header>

    <main class="flex-grow p-4 overflow-y-auto space-y-6">
        <!-- Habits Stats -->
        <section>
            <h2 class="text-lg font-medium text-text-muted-light mb-3"><i class="fas fa-check-double mr-2 text-primary"></i>习惯统计</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light">总习惯数</p>
                    <p class="text-2xl font-semibold text-base-content-light">5</p>
                </div>
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light">今日完成率</p>
                    <p class="text-2xl font-semibold text-primary">60%</p>
                </div>
                <div class="stat-card col-span-2 p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light mb-1">本周习惯打卡趋势</p>
                    <canvas id="habitsTrendChart" height="100"></canvas>
                </div>
            </div>
        </section>

        <!-- Todos Stats -->
        <section>
            <h2 class="text-lg font-medium text-text-muted-light mb-3"><i class="fas fa-list-ul mr-2 text-secondary"></i>待办统计</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light">今日待办</p>
                    <p class="text-2xl font-semibold text-base-content-light">3 <span class="text-sm">/ 5</span></p>
                </div>
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light">本周完成数</p>
                    <p class="text-2xl font-semibold text-secondary">12</p>
                </div>
            </div>
        </section>

        <!-- Finance Stats -->
        <section>
            <h2 class="text-lg font-medium text-text-muted-light mb-3"><i class="fas fa-balance-scale-right mr-2 text-accent"></i>财务状况分析</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="stat-card p-4 rounded-lg shadow col-span-1 md:col-span-2">
                    <p class="text-sm text-text-muted-light mb-1">月度现金流趋势 (近6个月)</p>
                    <canvas id="cashflowTrendChart" height="100"></canvas>
                </div>
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light mb-1">资产构成</p>
                    <canvas id="assetCompositionChart" height="150"></canvas>
                </div>
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light mb-1">收入来源 (本月)</p>
                    <canvas id="incomeSourceChart" height="150"></canvas>
                </div>
                 <div class="stat-card p-4 rounded-lg shadow col-span-1 md:col-span-2">
                    <p class="text-sm text-text-muted-light mb-1">负债明细</p>
                    <canvas id="liabilityDetailsChart" height="120"></canvas>
                </div>
            </div>
            <!-- Image from Pexels: https://www.pexels.com/photo/person-using-macbook-pro-313782/ -->
            <img src="https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Analytics on screen" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75">
        </section>

        <!-- Time Management Stats -->
        <section>
            <h2 class="text-lg font-medium text-text-muted-light mb-3"><i class="fas fa-clock mr-2 text-yellow-500"></i>时间管理统计</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light mb-1">今日专注时长</p>
                    <p class="text-2xl font-semibold text-base-content-light">3h 45m</p>
                </div>
                <div class="stat-card p-4 rounded-lg shadow">
                    <p class="text-sm text-text-muted-light mb-1">本周总记录时长</p>
                    <p class="text-2xl font-semibold text-yellow-500">25h 10m</p>
                </div>
                <div class="stat-card p-4 rounded-lg shadow col-span-1 md:col-span-2">
                    <p class="text-sm text-text-muted-light mb-1">时间分配 (本周)</p>
                    <canvas id="timeDistributionChart" height="150"></canvas>
                </div>
                <div class="stat-card p-4 rounded-lg shadow col-span-1 md:col-span-2">
                    <p class="text-sm text-text-muted-light mb-1">主要活动时长 (本周)</p>
                    <canvas id="activityDurationChart" height="120"></canvas>
                </div>
            </div>
             <!-- Image from Pexels: https://www.pexels.com/photo/time-management-concept-872831/ -->
            <img src="https://images.pexels.com/photos/872831/pexels-photo-872831.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Time management concept" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75">
        </section>

    </main>

    <nav class="bottom-nav bg-base-100-light p-3 flex justify-around items-center sticky bottom-0 z-10 border-t border-border-light">
        <a href="home_habits.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-check-double text-xl"></i>
            <span class="text-xs mt-1">习惯</span>
        </a>
        <a href="home_todos.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-list-ul text-xl"></i>
            <span class="text-xs mt-1">待办</span>
        </a>
        <a href="home_finance.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-wallet text-xl"></i>
            <span class="text-xs mt-1">财务</span>
        </a>
        <a href="home_time.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-clock text-xl"></i>
            <span class="text-xs mt-1">时间</span>
        </a>
        <a href="home_stats.html" class="nav-item active flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-chart-line text-xl"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
    </nav>

    <script>
        Chart.defaults.color = tailwind.config.theme.extend.colors['chart-text-light'];
        Chart.defaults.borderColor = tailwind.config.theme.extend.colors['chart-grid-light'];

        // Habits Trend Chart
        const habitsCtx = document.getElementById('habitsTrendChart').getContext('2d');
        new Chart(habitsCtx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '打卡数',
                    data: [3, 2, 4, 3, 5, 4, 3],
                    borderColor: tailwind.config.theme.extend.colors.primary,
                    backgroundColor: tailwind.config.theme.extend.colors.primary + '33', // transparent primary
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true, suggestedMax: 5 }
                }
            }
        });

        // Cashflow Trend Chart
        const cashflowCtx = document.getElementById('cashflowTrendChart').getContext('2d');
        new Chart(cashflowCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '月现金流',
                    data: [2500, 2800, 3200, 3000, 4500, 6500],
                    borderColor: tailwind.config.theme.extend.colors.primary,
                    backgroundColor: tailwind.config.theme.extend.colors.primary + '33',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: false } }
            }
        });

        // Asset Composition Chart
        const assetCtx = document.getElementById('assetCompositionChart').getContext('2d');
        new Chart(assetCtx, {
            type: 'pie',
            data: {
                labels: ['房地产', '股票基金', '现金储蓄', '其他投资'],
                datasets: [{
                    label: '资产构成',
                    data: [80000, 40000, 25000, 5000],
                    backgroundColor: ['#22D3EE', '#A78BFA', '#34D399', '#FBBF24'], // Cyan, Violet, Emerald, Amber
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom', labels: { padding: 10, font: {size: 10} } } }
            }
        });

        // Income Source Chart
        const incomeSourceCtx = document.getElementById('incomeSourceChart').getContext('2d');
        new Chart(incomeSourceCtx, {
            type: 'doughnut',
            data: {
                labels: ['主动收入 (工资)', '被动收入 (房租)', '被动收入 (股息)'],
                datasets: [{
                    label: '收入来源',
                    data: [8800, 1000, 200],
                    backgroundColor: ['#6366F1', '#10B981', '#059669'], // Secondary, Primary, Primary-Focus
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom', labels: { padding: 10, font: {size: 10} } } }
            }
        });

        // Liability Details Chart
        const liabilityCtx = document.getElementById('liabilityDetailsChart').getContext('2d');
        new Chart(liabilityCtx, {
            type: 'bar',
            data: {
                labels: ['房贷', '车贷', '信用卡'],
                datasets: [{
                    label: '负债金额',
                    data: [35000, 10000, 5000],
                    backgroundColor: ['#F87171', '#FB923C', '#FACC15'], // Red, Orange, Yellow
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { x: { beginAtZero: true } }
            }
        });

        // Time Distribution Chart
        const timeDistributionCtx = document.getElementById('timeDistributionChart').getContext('2d');
        new Chart(timeDistributionCtx, {
            type: 'pie',
            data: {
                labels: ['工作', '学习', '运动', '通勤', '家务', '娱乐'],
                datasets: [{
                    label: '时间分配',
                    data: [10, 5, 3, 2, 2.5, 2.5],
                    backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899', '#84CC16'], // Blue, Green, Amber, Indigo, Pink, Lime
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom', labels: { padding: 10, font: {size: 10} } } }
            }
        });

        // Activity Duration Chart
        const activityDurationCtx = document.getElementById('activityDurationChart').getContext('2d');
        new Chart(activityDurationCtx, {
            type: 'bar',
            data: {
                labels: ['项目A', '专业课程', '健身房', '阅读', '编码'],
                datasets: [{
                    label: '活动时长 (小时)',
                    data: [8, 4, 2.5, 2, 3.5],
                    backgroundColor: ['#0EA5E9', '#22C55E', '#F97316', '#8B5CF6', '#D946EF'], // Sky, Green, Orange, Violet, Fuchsia
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { x: { beginAtZero: true } }
            }
        });
    </script>

</body>
</html>